<script setup lang='ts'>
import { useCounterStore, useDataStore, useThemeStore } from '@/store'

const themeStore = useThemeStore()
const dataStore = useDataStore()
const counterStore = useCounterStore()
</script>

<template>
  <div class="card">
    <h5>Store Settings</h5>
    <h5 class="mb-4 text-2xl font-bold">
      Primevue Theme Store
    </h5>
    <div class="grid grid-cols-2 gap-4">
      <div>Theme Name</div>
      <div>{{ themeStore.themeName }}</div>
      <div>Theme Color</div>
      <div>{{ themeStore.themeColor }}</div>
    </div>

    <h5 class="mb-4 text-2xl font-bold">
      Data Store (Option Store)
    </h5>
    <span class="text-xs">Example of a Data Store</span>
    <div class="grid grid-cols-2 mt-6 gap-4">
      <div>Products</div>
      <div>{{ dataStore.products.length }}</div>
    </div>

    <h5 class="mb-4 text-2xl font-bold">
      Counter Store (Setup Store)
    </h5>
    <span class="text-xs">Example of a Data Store</span>
    <div class="mt-6">
      <div>
        <InputText v-model="counterStore.name" />
      </div>
    </div>
    <div class="mt-3">
      {{ counterStore.name }} clicked {{ counterStore.count }} times. Doubled value: {{ counterStore.doubleCount }}
    </div>
    <div class="mt-3">
      <Button :label="counterStore.name" @click="counterStore.increment()" />
    </div>
  </div>
</template>

<style lang='scss' scoped>
h5 {
  color: var(--primary-color)
}
</style>
